<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../../../js/jquery-1.10.1.min.js"></script>
    <script src="../js/gouWuChe.js"></script>
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label>
                    </th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">
            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>
    // ajax请求
    async function fn() {
        var data = await shoppingCar();
        // console.log(data);
        var html = "";
        $(data).each(function (index, {goodsMsg, goodsImg, goodsPrice, goodsNum}) {
            html += `<tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods">
                        <img src="${goodsImg}" alt="" />
                        <span>${goodsMsg}</span>
                    </td>
                    <td class="price">${goodsPrice.toFixed(2)}</td>
                    <td class="count"><span class="reduce">${goodsNum > 1 ? "-" : ""}</span>
                        <input class="count-input" type="text" value="${goodsNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(goodsPrice * goodsNum).toFixed(2)}</td>
                    <td class="operation">
                        <span class="delete">删除</span>
                    </td>
                </tr>`;
        });
        // $("tbody")[0].innerHTML = html;
        $("tbody").html(html);
    }
    fn();

    $(function () {
        // 全选
        $(".catbox").on("click", ".check-all", function () {
            var status = $(this).prop("checked");
            $(".check-one").prop("checked", status);

            getTotal();
        });
        // $(".catbox").delegate(".check-all", "click", function () {
        //     var status = $(this).prop("checked");
        //     $(".check-one").prop("checked", status);

        //     getTotal();
        // });


        // 反选
        $(".catbox").delegate(".check-one", "click", function () {
            isAllchecked();

            getTotal();
        });

        // 增加
        $(".catbox").delegate(".add", "click", function () {
            var index = $(this).prev().val();
            index++;
            $(this).prev().val(index);

            // 这个元素的父元素的后一个元素的内容 = 下标*这个元素的父元素的前一个元素
            $(this).parent().next().text((index * $(this).parent().prev().text()).toFixed(2));

            $(this).prevAll(".reduce").text("-");

            getTotal();
        });

        // 减少
        $(".catbox").delegate(".reduce", "click", function () {
            var index = $(this).next().val();
            if ($(this).next().val() > 1) {
                index--;
                $(this).next().val(index);
            }

            $(this).parent().next().text((index * $(this).parent().prev().text()).toFixed(2));
            console.log(index);
            console.log($(this).parent().prev().text());

            if ($(this).next().val() <= 1) {
                $(this).text("");
            }

            getTotal();
        });

        // 单删
        $(".catbox").delegate(".delete", "click", function () {
            if (confirm("是否确认删除？"))
                $(this).parents("tr").remove();
            isAllchecked();

            getTotal();
        });

        // 多删
        $(".catbox").delegate("#deleteAll", "click", function () {
            if ($(".check-one").length > 0) {
                if ($(".check-one:checked").length > 0 && confirm("是否确认删除？")) {
                    $(".check-one:checked").parents("tr").remove();
                } else {
                    alert("至少选中一件商品！");
                }
            } else {
                alert("您还没有添加商品哦！");
            }

            if ($(".check-one:checked").length == 0)
                $(".check-all").prop("checked", false);

            getTotal();
        });

        // 结算
        function getTotal() {
            var sum = 0;
            var allPrice = 0;
            $(".check-one:checked").each(function () {
                sum += $(this).parents("tr").find(".count-input").val() * 1;
                allPrice += $(this).parents("tr").find(".subtotal").text() * 1;
            });
            $("#selectedTotal").text(sum);
            $("#priceTotal").text(allPrice.toFixed(2));
        }

        //反选，如果全被选中，则返回true 
        function isAllchecked() {
            // var flag = true;
            // $(".check-one").each(function (index, item) {
            //     console.log(item);
            //     if (!(item.checked)) {
            //         flag = false;
            //     }
            // });
            // return flag;
            if ($(".check-one:checked").length == $(".check-one").length) {
                $(".check-all").prop("checked", true);
            } else {
                $(".check-all").prop("checked", false);
            }

        }


    });




























</script>

</html>